<template>
  <el-dialog :title="title" class="freezeAccount" :visible.sync="isShowModel" :before-close="handleClose" @close="$emit('update:isShowDetail', false)" :close-on-click-modal="false">
    <el-form :model="freezeInfo" ref="freezeInfo" :rules="rules" label-width="140px">
      <el-form-item label="进行冻结:" required>
        <div class="c-red">
          冻结
        </div>
      </el-form-item>
      <el-form-item label="供应商企业名称:" required>
        <div>
          {{dataInfo ? dataInfo.enterpriseName : ""}}
        </div>
      </el-form-item>
      <el-form-item label="操作验证:" required>
        <!--dataInfo.gmTel-->
        <el-input v-model="dataInfo.gmTel" disabled>
          <template slot="append">
            <el-button type="text" @click="getPhoneWord" v-if="!isHasValidCode" :loading="isGetInterface">
              发送验证码
            </el-button>
            <span class="" v-else>{{tipMessage}}</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="验证验证码:" prop="authCode" required>
        <el-input v-model="freezeInfo.authCode"></el-input>
      </el-form-item>
      <el-form-item label="备注内容:" prop="remark" required>
        <el-input v-model="freezeInfo.remark" type="textarea" :autosize="{ minRows: 6, maxRows: 8}"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeModel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "FreezeAccount",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          },
          dataInfo: {
            type: Object,
            default: () => {}
          },
          title: {
            type: String,
            default: "冻结操作"
          }
        },
        data() {
          return {
            isShowModel: this.isShowDetail,
            freezeInfo: {
              isCedit: 0,
              authCode: "",
              remark: ""
            },
            timer: null,
            tipMessage: "",
            rules: {
              authCode: [
                { required: true, message: '请输入验证码', trigger: ['change', 'blur'] }
              ],
              remark: [
                { required: true, message: '请输入备注内容', trigger: ['change', 'blur'] },
                { validator: validate.length150, trigger: ['change', 'blur'] }
              ]
            },
            isHasValidCode: false,
            // 是否在请求接口
            isGetInterface: false
          }
        },
        methods: {
          getPhoneWord() {
            // this.$message.error("获取手机验证码");
            this.isHasValidCode = true;
            let time = 60;
            this.tipMessage = time + "秒";
            this.timer = setInterval(() => {
              if(time <= 0) {
                clearInterval(this.timer)
                this.timer = null;
                this.tipMessage = ""
                this.isHasValidCode = false;
                return ;
              }
              time --;
              this.tipMessage = time + "秒";
            }, 1000)
            let data = {
              codeType: 22,
              roleType: 3,
              telphone: this.dataInfo.gmTel
            }
            ajax.post(apis.common.sendCode, data).then(res => {
              if(res.code == "10000000") {

              } else {
                this.$message.error(res.message)
              }
            })
          },
          handleClose(done) {
            clearInterval(this.timer)
            this.timer = null;
            this.isHasValidCode = false;
            this.$refs['freezeInfo'].resetFields()
            done()
          },
          closeModel() {
            clearInterval(this.timer)
            this.timer = null;
            this.isHasValidCode = false;
            this.$refs['freezeInfo'].resetFields()
            this.$emit('update:isShowDetail', false)
          },
          submitForm() {
            let data = {
              ...this.freezeInfo,
              userId: this.dataInfo.userId,
              telphone: this.dataInfo.gmTel
            }
            this.$refs['freezeInfo'].validate((valid) => {
              if(valid) {
                ajax.post(apis.finance.accountThaw, data).then(res => {
                  if(res.code == "10000000") {
                    this.$message({
                      type: 'success',
                      message: '冻结成功'
                    });
                    this.$emit('fresh')
                    this.closeModel()
                  } else {
                    this.$message.error(res.message)
                  }
                })
              }
            })
          }
        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val
          }
        }
    }
</script>

<style lang="scss">
.freezeAccount {
  .el-dialog {
    width: 600px;
    .el-input {
      width: 300px;
      .el-button {
        padding: 0 10px;
      }
    }
  }
}
</style>
